<template>
  <j-modal title="已办待办-详情" :visible="visible" :footer="null" ok-text="" :destroyOnClose="true" :fullscreen="true" @close="()=>{visible = false,active='1'}">
    <div style="width: 100%">
      <a-tabs defaultActiveKey='1' :activeKey="active" tabPosition="left" @change="handleTabChange">
        <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.title">
          <div class="">
            <component v-if="active==item.key" ref="tableModel" :is="item.importSrc" @closed="()=>{visible = false,active='1'}"></component>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </j-modal>
</template>

<script>
export default {
  name: 'todoModel',
  components: {},
  props: {
    todoActive: {
      type: String,
      default: '1'
    }
  },
  watch: {
    todoActive: {
      handler(val) {
        this.active = val
      }
    }
  },
  data() {
    return {
      visible: false,
      active:'1',
      tabList: [
        {
          key: '1',
          title: '待办',
          importSrc: () => import('./todolistTable/db.vue'),
        },
        {
          key: '2',
          title: '已办',
          importSrc: () => import('./todolistTable/yb.vue'),
        }
      ],
    }
  },
  methods: {
    handleTabChange(key) {
      console.log(key, 'key')
      this.active = key
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>